<template>
  <div>
  <h1>房型显示</h1>
  名称：<input type="text" v-model="ttt">
  <input type="button" value="查询" @click="Show">
  <table class="table table-bordered">
    <tbody>
      <tr>
        <td>
          <input type="checkbox" v-model="array" @change="Quan">
        </td>
        <td>房间名称</td>
        <td>门市价</td>
        <td>押金</td>
        <td>房型面积</td>
        <td>可住人数</td>
        <td>是否加床</td>
        <td>图片</td>
        <td>备注</td>
        <td>操作</td>
      </tr>

      <tr v-for="item in info" >
        <td>
          <input type="checkbox" :value="item.id" :checked="Sing" v-model="Alltype" @change="FanXu">
        </td>
        <td>{{item.fjcname}}</td>
        <td>{{item.mensja}}</td>
        <td>{{item.yjin}}</td>
        <td>{{item.mianji}}</td>
        <td>{{item.rshu}}</td>
        <td>{{item.sfjiac}}</td>
        <td>
          <img :src="item.photo" width="60" height="60" alt="">
        </td>
        <td>{{item.fxBezhu}}</td>
        <td>
          <input type="button" value="删除" @click="DelSc(item.id)">
        </td>
      </tr>
    </tbody>
  </table>
  </div>
  共{{ page.pagecount }}条数据，每页显示{{page.size  }}条，当前{{ page.index }}/{{page.pageindex}}页
  <a href="#" @click="p('sy')">首页</a>
  <a href="#" @click="p('ssy')">上一页</a>
  <a href="#" @click="p('dy')">1</a>
  <a href="#" @click="p('de')">2</a>
  <a href="#" @click="p('ds')">3</a>
  <a href="#" @click="p('xyy')">下一页</a>
  <a href="#" @click="p('wy')">尾页</a>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue';
import axios from 'axios'
import { useRoute,useRouter } from 'vue-router';
let route=useRoute();
let router=useRouter()

const info:any=ref([{
  "id": 0,
  "fjcname": "",
  "mensja": "",
  "yjin": "",
  "mianji": "",
  "rshu": "",
  "sfjiac": 0,
  "photo": "",
  "fxBezhu": "",
}])

const array=ref(false);
const Alltype=ref([]);
const Sing=ref(false);

//全选
const Quan=()=>{
  if(array.value==true)
  {
    Sing.value=true;
    Alltype.value=info.value.map((e:any)=>{
       return e.id;
    })
  }
  else{
   Sing.value=false;
   Alltype.value=[];
  }
}

//反选
const FanXu=()=>{
 if(Alltype.value.length==page.value.size)
 {
  array.value=true;
 }  
 else{
  array.value=false;
 }
}

const page=ref({
  index:1,
  size:2,
  pagecount:0,
  pageindex:0
})
onMounted(()=>{
  Show();
})
let ttt=ref([]);
const Show=()=>{
  axios.get("https://localhost:7177/api/Fx/Shwo",{
    params:{
      Usecnae:ttt.value,
     index:page.value.index,
     size:page.value.size,
    }
  })
  .then(res=>{
    info.value=res.data.list,
    page.value.pageindex=res.data.pageindex,
    page.value.pagecount=res.data.pagecount
  })
}

const p=(e:any)=>{
switch(e)
{
  case 'sy':
  if(page.value.index==1)
      {
        alert('当前页是第一页');
        return;
      }
    page.value.index=1;
    break;

    case 'ssy':
      if(page.value.index==1)
      {
        alert('当前页是第一页');
        return;
      }
    page.value.index=page.value.index-1;
    break;


    case 'xyy':
    if(page.value.index==page.value.pageindex)
      {
        alert('当前页是最后一页');
        return;
      }
    page.value.index=page.value.index+1;
    break;


    case 'wy':
    if(page.value.index==page.value.pageindex)
      {
        alert('当前页是最后一页');
        return;
      }
    page.value.index=page.value.pageindex;
    break;

    case 'dy':
    page.value.index=1;
    break;


    case 'de':
    page.value.index=2;
    break;


    case 'ds':
    page.value.index=3;
    break;
}
Show();
}

const DelSc=(id:any)=>{
  if(confirm('确认删除吗'))
  {
     axios.get("https://localhost:7177/api/Fx/Delect",{
      params:{
        id:id,
      }
     })
     .then(res=>{
      if(res.data>0)
     {
      alert('删除成功');
      Show();
     }
     else{
      alert('删除失败');
      return;
     }
     })
  }
}
</script>

<style scoped>

</style>